<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: #f0f0f0;
			}
			.bg-dark {
				background: #333333 !important;
			}
			.aui-bar-btn-item {
				background: #ffffff;
				border: none;
				border-bottom: 2px solid #ffffff;
			}
			.aui-bar-btn-item.aui-active {
				color: #039be5;
				background: #ffffff;
				border-bottom: 2px solid #039be5;
			}
			.nomore-tag {
				margin: 0 auto;
				text-align: center;
				width: auto;
				color: #333;
				padding: 0px 10px 0px 10px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div id="loanListContainer" class="aui-content aui-margin-b-15">
			<ul class="aui-list aui-media-list">
				<template id="loan_list">
					<li class="aui-list-header" style="padding: 0.2rem; background-color: #f0f0f0;"></li>
					<li class="aui-list-item" id="item_container" item_index="" tapmode onclick="openLoanDetail(this)">
						<div class="aui-media-list-item-inner">
							<div class="aui-list-item-media" style="width: 3.2rem;">
								<img id="company_icon" style="border-radius: 10px;" src="">
							</div>
							<div class="aui-list-item-inner">
								<div class="aui-list-item-text">
									<div id="loan_name" class="aui-list-item-title">
										loan_name
									</div>
									<div id="loan_stat" class="aui-list-item-right">
										loan_stat
									</div>
								</div>
								<div id="loan_limit" class="aui-list-item-text aui-padded-t-10 loan_list_text" style="width: 10rem;">
									贷款额度
								</div>
							</div>
						</div>
						<div>
							<li class="aui-list-header"  style="background-color: #f0fbff;">
								<img src="../../image/main_frm_1/coins.png" style="width: 0.6rem;" class="aui-img-round" />
								<span id="loan_desc" class="aui-margin-l-5">loan_desc</span>
							</li>
						</div>
					</li>
				</template>
				<div id="list_container"></div>
			</ul>
			<div style="padding: 0.5rem 1rem 0rem 1rem;">
				<div id="loadmore-tag" class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" style="display: none" tapmode onclick="loadMoreListItems()">
					查看更多
				</div>
				<div id="nomore-tag" class="nomore-tag" style="display: none">
					没有更多了...
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script type="text/javascript" src="../../script/aui-toast.js" ></script>
	<script type="text/javascript" src="../../script/aui-dialog.js" ></script>
	<script type="text/javascript" src="../../script/APICloud-rest-SHA1.js" ></script>
	<script>
		var client = new Resource("A6928874653494", "4B6C428C-24C2-F9E7-3175-F983922E8C8F");
		var userRecord = client.Factory("user");
		var option_indices = [1, 1, 1];
		var pledge_types = ["金额不限", "2000以下", "2000-5000", "5000-10000", "10000-20000", "20000-50000", "50000以上"];
		var repay_types = ["类型不限", "极速贷", "学生贷", "工薪贷", "自由职业贷", "企业贷", "农户贷", "抵押贷", "淘宝贷", "信用卡贷"];
		var sort_types = ["默认排序", "按利率排序"];
		var loanTags = ["*", "fast", "student", "salariat", "freelance", "company", "farmer", "pledge", "taobao", "creditCard"];
		var amountTags = ["*", "<2000", "2000-5000", "5000-10000", "10000-20000", "20000-50000", ">50000"];
		var selector_data = {
			options : [0, 0, 0, 0, 0]
		};
		var option_frame = "none";
		var listEnd = 0;
		var toast = new auiToast();
		var dialog = new auiDialog();
		var loanAmountIndex = 0;
		var loanTagIndex = 0;
		var loanSortIndex = 0;
		var favorites = [];
		var displayLength = 20;
		var displayCount = 0;
		Array.prototype.contains = function(obj) {
			var i = this.length;
			while (i--) {
				if (this[i] == obj) {
					return true;
				}
			}
			return false;
		}
		function loadLoanList() {
			var index_start = 0;
			var hotLength = 50;
			var loanAmountFloor = [0, 0, 2000, 5000, 10000, 20000, 50000];
			var loanAmountUpper = [10000000, 2000, 5000, 10000, 20000, 50000, 10000000];
			var model = api.require('model');
			model.config({
				appId : 'A6928874653494',
				appKey : '4B6C428C-24C2-F9E7-3175-F983922E8C8F',
				host : 'https://d.apicloud.com'
			});
			var query = api.require('query');
			var queryId = 0;
			var userId = "";
			query.createQuery(function(ret, err) {
				if (ret) {
					queryId = ret.qid;
					if (queryId) {
						query.limit({
							qid : queryId,
							value : hotLength
						});
						query.skip({
							qid : queryId,
							value : listEnd
						});
						/*
						 query.whereEqual({
						 qid : queryId,
						 column : 'username',
						 value : pwPhoneText
						 });
						 */
						if (loanSortIndex == 0) {
							query.asc({
								qid : queryId,
								column : 'hotLevel'
							});
						} else {
							query.asc({
								qid : queryId,
								column : 'yearRate'
							});
						}
						if (loanTagIndex) {
							query.whereContainAll({
								qid : queryId,
								column : 'loanClassTag',
								value : [loanTags[loanTagIndex]]
							});
						}
						if (loanAmountIndex) {
							query.whereContainAll({
								qid : queryId,
								column : 'loanAmountTag',
								value : [amountTags[loanAmountIndex]]
							});
						}
						model.findAll({
							class : "loanItemRecord",
							qid : queryId
						}, function(ret, err) {
							if (ret) {
								//alert(JSON.stringify(ret));
								//alert(ret.length);
								listEnd += ret.length;
								for (var i = index_start; i < ret.length; i++) {
									if (!favorites.contains(ret[i].id)) {
										continue;
									}
									displayCount++;
									var template = document.querySelector('#loan_list');
									var clone = template.content.cloneNode(true);
									var icon = clone.querySelector('#company_icon');
									icon.src = ret[i].loanItemIconName;
									var loan_name = clone.querySelector('#loan_name');
									loan_name.textContent = ret[i].finInstName;
									var loan_stat = clone.querySelector('#loan_stat');
									if (ret[i].rateTypeIndex == 0) {
										loan_stat.textContent = '参考日利率: ' + ret[i].dayRate.toFixed(2) + '%';
									} else if (ret[i].rateTypeIndex == 1) {
										loan_stat.textContent = '参考月利率: ' + ret[i].monthRate.toFixed(2) + '%';
									} else {
										loan_stat.textContent = '参考年利率: ' + ret[i].yearRate.toFixed(2) + '%';
									}
									var loan_limit = clone.querySelector('#loan_limit');
									loan_limit.textContent = '可贷款额度: ' + ret[i].loanFloorLimit + '-' + ret[i].loanUpperLimit + '元';
									var loan_desc = clone.querySelector('#loan_desc');
									loan_desc.innerHTML = ret[i].loanItemDescription;
									var item_container = clone.querySelector('#item_container');
									item_container.item_index = ret[i].id;
									var list_container = document.querySelector('#list_container');
									list_container.appendChild(clone);
								}
								if (ret.length == 0 || ret.length < hotLength) {
									var loadmore = document.querySelector('#loadmore-tag');
									loadmore.style.display = "none";
									var nomore = document.querySelector('#nomore-tag');
									nomore.style.display = "block";
									toast.hide();
									return;
								} else {
									var loadmore = document.querySelector('#loadmore-tag');
									loadmore.style.display = "block";
									var nomore = document.querySelector('#nomore-tag');
									nomore.style.display = "none";
								}
								if (displayCount < displayLength) {
									loadLoanList();
								} else {
									displayCount = 0;
									toast.hide();
								}
							} else {
								alert(JSON.stringify(err));
							}
						});
					}
				} else {
					alert(JSON.stringify(err));
				}
			});
		}

		function loadMoreListItems() {
			loadLoanList();
		}

		function openLoanDetail(e) {
			var delay = 0;
			var options = {
				loanId : e.item_index,
			};
			//alert(options.loanId);
			if (api.systemType != 'ios') {
				delay = 300;
			}
			api.openWin({
				name : 'loan_detail_win',
				url : './loan_detail_win.html',
				bounces : false,
				delay : delay,
				slidBackEnabled : true,
				vScrollBarEnabled : false,
				animation : {
					type : "movein", //动画类型（详见动画类型常量）
					subType : "from_left", //动画子类型（详见动画子类型常量）
					duration : delay //动画过渡时间，默认300毫秒
				},
				pageParam : options,
			});
		}

		function queryFavList() {
			toast.loading({
				title : "加载中",
				duration : 2000
			}, function(ret) {
				console.log(ret);
				setTimeout(function() {
					toast.hide();
				}, 30000)
			});
			userRecord.query({
				filter : {
					"limit" : 1,
					"where" : {
						"id" : $api.getStorage('userID')
					}
				}
			}, function(ret, err) {
				if (err) {
					//处理错误 err
					alert(JSON.stringify(err));
				} else {
					//处理数据 ret
					//alert(JSON.stringify(ret));
					if (ret.length) {
						favorites = ret[0].favorites;
						loadMoreListItems();
						//alert(api.pageParam.loanId);
					}
				}
			});
		}

		apiready = function() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				var list_container = document.querySelector('#list_container');
				var children = list_container.childNodes;
				var childnum = children.length;
				for (var j = 0; j < childnum; j++) {
					list_container.removeChild(list_container.firstChild);
				}
				listEnd = 0;
				queryFavList();
				api.refreshHeaderLoadDone();
			});
			api.parseTapmode();
			queryFavList();
		}
	</script>
</html>